<template>
	<div class="task">
		<div class="content">
      <el-image :src="props.task.src" class="img" :preview-src-list="[props.task.src]" hide-on-click-modal/>
      <div class="task-info">
        <div class="title">{{ props.task.index }}、接下来请您叙述一个完整的故事，故事需要包括如下方面：</div>
        <div class="info">(1) 图片描述了一个怎样的情景？</div>
        <div class="info">(2) 图片中的情景是怎样发生的？</div>
        <div class="info">(3) 图片中的人物在想什么？</div>
        <div class="info">(4) 图片中人物的感受是怎样的？</div>
        <div class="info">(5) 结果是怎样的</div>
        <div class="tips">提示：请尽量发挥你的文学想象力，你想怎么编都行，故事的长短和细节都由你来定。</div>
        <el-button type="primary" @click="showRecordingModel = true">开始回答</el-button>
      </div>
    </div>
    <TaskProcess/>

		<div class="mask" v-if="showMask">
			<img :src="props.task.src"/>
		</div>


		<!--回答弹窗-->
    <RecordingModel
        v-model="showRecordingModel"
        :video-name="generateVideoName() + '_回答TAT图片'"
        uploadFolder="recording"
        @confirm="showEvaluationModel = true"
    />

    <ReportModel
        v-model="showEvaluationModel"
        :key="Date.now()"
        :jsonName="generateVideoName() + '_回答TAT图片表单'"
        uploadFolder="task-json"
        :task="props.task"
    />
	</div>
</template>
<script setup>
import {defineProps, defineEmits, ref, onMounted, onUnmounted, computed} from 'vue'
import {ElMessage} from "element-plus"
import useUserStore from "@/stores/user.js"
import RecordingModel from "@/views/task/component/Report/RecordingModel.vue";
import ReportModel from "@/views/task/component/Report/ReportModel.vue";
import TaskProcess from "@/views/task/component/TaskProcess.vue";
import { useVideoRecorder } from '@/hooks/useVideoRecorder'


const userStore = useUserStore()

const props = defineProps({
	task: {
		type: Object,
		required: true
	}
})

// 生成视频文件名
const generateVideoName = () => {
  const timestamp = Date.now();
  return `${userStore.userInfo.data.account}_${props.task.id}_${timestamp}`;
};


// 使用视频录制hooks
const { startRecording, stopAndUpload} = useVideoRecorder({
  uploadFolder: 'wacheVideo',
  videoName: generateVideoName() + '_观看TAT图片'
});

//评价弹窗
const showEvaluationModel = ref(false)

//回答录音弹窗
const showRecordingModel = ref(false)

// 图片全屏
const showMask = ref(true)


onMounted(async ()=> {
  await startRecording()
  setTimeout(async ()=> {
    await stopAndUpload()
    showMask.value = false
  }, 10000)
})
</script>

<style lang="scss" scoped>
.task{
  height: 100%;
  position: relative;
  .mask{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    img{
      height: 100%;
    }
  }
  .content{
    padding: 60px;
    display: flex;
    align-items: flex-start;
    .img{
      width: 200px;
      height: 240px;
    }
    .task-info{
      padding-left: 30px;
      .title{
        font-size: 24px;
        margin-bottom: 20px;
      }
      .info{
        font-size: 18px;
        margin-bottom: 14px;
      }
      .tips{
        margin-bottom: 43px;
        font-size: 14px;
      }
    }
  }

}
</style>